<template>
  <div class="box">
    <img src="https://img1.baidu.com/it/u=958974078,2406903874&fm=253&fmt=auto&app=138&f=JPEG?w=840&h=419" alt="" />
    <div class="title">欢迎登录</div>
    <div class="login tc">
      <el-form ref="formRef" :model="form" label-width="52px" :rules="rules">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.userName" class="w320" placeholder="请输入账号" @keyup.enter="handleLogin" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"
                    type="password"
                    class="w320"
                    placeholder="请输入密码"
                    @keyup.enter="handleLogin" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleLogin"> 登录 </el-button>
      <div class="demo">login......</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { onMounted, reactive, ref, toRefs, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { users } from '@/utils/user'
import ajax from '@/utils/ajax'
import mittBus from '@/utils/mitt'

interface Form {
  userName: string
  password: string
}

const store = useStore()
const formRef = ref<FormInstance>()
const formMap = reactive({
    form: {
        userName: '',
        password: ''
    } as Form
})
const rules = {
    userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const router = useRouter()
const handleLogin = () => {
    // if (!formRef.value) return
    mittBus.emit('login', '登陆了')
    formRef.value?.validate(valid => {
        if (valid) {
            const pass = users.find(item => item.userName === formMap.form.userName)?.password
            const userNames = users.map(item => item.userName)
            if (userNames.includes(formMap.form.userName) && pass === formMap.form.password) {
                router.push('/typeHome')
                ElMessage.success('登录成功')
                localStorage.setItem('token', 'dadwfefre3534gfdgfgtr')
                localStorage.setItem('userName', formMap.form.userName)
                localStorage.setItem('password', formMap.form.password)
                store.commit('setUserName', formMap.form.userName)
            } else {
                ElMessage.error('请检查账号密码是否正确')
            }
        }
    })
}
const { form } = toRefs(formMap)
onMounted(() => {
    ajax.get('ceshi/HPImageArchive.aspx', { params: { format: 'js', idx: 0, n: 1, mkt: 'zh-CN' } }).then(res => {
        console.log(res)
    })
})
</script>
<style scoped lang="less">
.el-button {
  padding: 8px 30px;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  img {
    // width: 20px;
    width: 100vw;
    height: 100vh;
  }
  .title {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
    background: #042847;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #366ea7, 1px 1px 6px 1px rgba(35, 59, 156, 0.5);
    color: #ffffff;
    font-family: '微软雅黑', '宋体', '黑体', Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
  }
  .login {
    padding: 30px 50px;
    position: absolute;
    box-shadow: 2px 2px 5px #000;
    top: 30%;
    right: 20%;
    background-color: white;
  }
  .demo {
    font-family: 'login';
  }
}
</style>
